/*
 * @license
 * Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
 * This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 * The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 * The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 * Code distributed by Google as part of the polymer project is also
 * subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 */

$font-family-code: "Source Code Pro",Monaco,Menlo,Consolas,"Courier New",monospace;

//-----------------------------------------------------------------------
// Layout
//-----------------------------------------------------------------------

$siteBannerHeightMinMobile: 60px;
$siteBannerHeightMin: 80px;
$siteBannerHeightMax: 286px;

$break-small: 580px;
$break-medium: 850px;
$break-large: 990px;

//-----------------------------------------------------------------------
// Content
//-----------------------------------------------------------------------

$content-padding: 56px;
$sidebarWidth: 265px;
$additonalPadding: 24px;

$mobileContentPadding: 15px;

// Page section colors
$main-bg: #eee;
$main-purple: #1f2036;
$secondary-heading-color: #555;

$gray-light: #f2f2f2;
$gray-medium: #fafafa;

// Logo colors
// $purple-light: #7986cb;
// $purple-medium: #5c6bc0;
// $purple-dark: #2b398f;
// $pink-light: #ff4081;
// $pink-dark: #d61a7f;

$using-elements-color: #ff4080;//#3e50b4; //#5c6bc0; //#4558c9;
$creating-elements-color: #7986cb;//#e81d62;//#d61a7f;//#D93089;
$platform-color: #536df2;//#9f499b;//#6a3167;

$guides-resources-color: #d81b60;
$elements-color: #3f51b5;
$getting-started-color: #536dfe;

$warning-color: #ff4120;
$info-color: #3367d6;

@mixin display-flex() {
  display: -webkit-box; // Safari :(
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: -o-flex;
  display: flex;
}

@mixin flex($val) {
  -webkit-box-flex: 1; // Safari :(
  -webkit-flex: $val;
  -moz-flex: $val;
  -ms-flex: $val;
  -o-flex: $val;
  flex: $val;
}

@mixin justify-content($val: center) {
  -webkit-box-pack: $val;  // Safari :(
  -webkit-justify-content: $val;
  -moz-justify-content: $val;
  -ms-justify-content: $val;
  -o-justify-content: $val;
  justify-content: $val;
}

@mixin align-items($val: center) {
  -webkit-box-align: $val;  // Safari :(
  -webkit-align-items: $val;
  -moz-align-items: $val;
  -ms-align-items: $val;
  -o-align-items: $val;
  align-items: $val;
}

@mixin align-self($val: center) {
  -webkit-align-self: $val;
  -moz-align-self: $val;
  -ms-align-self: $val;
  -o-align-self: $val;
  align-self: $val;
}

@mixin flex-direction($val) {
  -webkit-box-orient: vertical;  // Safari :(
  -webkit-flex-direction: $val;
  -moz-flex-direction: $val;
  -ms-flex-direction: $val;
  -o-flex-direction: $val;
  flex-direction: $val;
}

@mixin flex-wrap($val: nowrap) {
  -webkit-flex-wrap: $val;
  -moz-flex-wrap: $val;
  -ms-flex-wrap: $val;
  -o-flex-wrap: $val;
  flex-wrap: $val;
}

@mixin width-max-content() {
  width: -webkit-max-content;
  width: -moz-max-content;
  width: -ms-max-content;
  width: -o-max-content;
  width: max-content;
}

@mixin width-min-content() {
  width: -webkit-min-content;
  width: -moz-min-content;
  width: -ms-min-content;
  width: -o-min-content;
  width: min-content;
}

@mixin user-select($val: none) {
  -webkit-user-select: $val;
  -moz-user-select: $val;
  -o-user-select: $val;
  -ms-user-select: $val;
  user-select: $val;
}

@mixin calc($property, $expression) {
  #{$property}: -moz-calc(#{$expression});
  #{$property}: -o-calc(#{$expression});
  #{$property}: -webkit-calc(#{$expression});
  #{$property}: calc(#{$expression});
}


@mixin filter($val: none) {
  -webkit-filter: $val;
  -moz-filter: $val;
  -o-filter: $val;
  -ms-filter: $val;
  //filter: $val;
}
